I am doing a code editor, almost everything is working, I type the text in the texarea and press a button to load a function, and the result of the code appears on the web browser console, I am trying to do like "document.getElementById('output').innerhtml = window.eval(txtarea.value);" But it does not seem to work.
function DebugInp(){
var txtarea = document.getElementById('input');
document.getElementById('output').innerHTML = window.eval(txtarea.value);//output = paragraph in html.
};
/**
*My problem is that the innerHTML is showing undefined, but when I'm getting to console,
*it appears the result.
*I'm thinking of maybe getting all of the outputs of the console, but IDK how to do it
*Kind of like: document.getElementById('output').innerHTML = console.logs?
*I am still searching but any help would be nice.
*/
thanks in advance! PS: I am better at frontend dev, trying to understand more of backend so don't hate 🙂 please.
What you're doing is very unsafe and there are many better ways to go about it. But nevertheless, you need to constrain the context of your input code. Simply evaluating the whole code won't give you the console logs. You need to expose an API for the code to send output to.
Minimal example:
var txtarea = document.getElementById('input');
document.getElementById('output').innerHTML = window.eval(`
const console = {
log(...args) {
document.getElementById('output').innerText += '\n' + args.join(' ');
}
};
${txtarea.value}
`);
OH!!! i did it guys! Just create a new standard function for console.log so it stores every logs i found the answer right here: https://stackoverflow.com/a/19846113/16260964
console.stdlog = console.log.bind(console);
console.logs = [];
console.log = function(){
console.logs.push(Array.from(arguments));
console.stdlog.apply(console, arguments);
}
var txtarea = document.getElementById('input');
window.eval(txtarea.value);
document.getElementById('output').innerHTML = console.logs;
GG! Have an great day everyone!🎊🎉🥳